<template>
  <div :class="cn('grid gap-6')">
    <form >
      <div class="grid gap-2">
        <div class="grid gap-2">
          <Label class="font-bold" for="username">用户名</Label>
          <Input
              class="ring-1 ring-discord-100"
              id="username"
              placeholder="请输入用户名"
              type="username"
              auto-capitalize="none"
              auto-complete="email"
              auto-correct="off"
              :disabled="isLoading"
              v-model="User.username"
          />
          <Label class="font-bold" for="password">密码</Label>
          <Input
              class="ring-1 ring-discord-100"
              id="password"
              placeholder="请输入用户密码"
              type="password"
              auto-capitalize="none"
              auto-complete="email"
              auto-correct="off"
              :disabled="isLoading"
              v-model="User.password"
          />
        </div>
        <Button @click="register" type="button" :disabled="isLoading">
          注册
        </Button>
      </div>
    </form>

    <el-dialog v-model="dialogFormVisible" title="最后一步,取个名字吧" width="500">
      <el-form :model="User">
        <el-form-item label="你的账号:" :label-width="140">
          <el-input v-model="User.username" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="昵称:" :label-width="140">
          <el-input v-model="User.nickname" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">
            确定
          </el-button>
        </div>
      </template>
      <el-alert
          v-if="alerflag2"
          title="账号信息填写有误"
          type="error"
          description="请检查"
          show-icon
      />
    </el-dialog>
    <el-alert
        v-if="alerflag1"
        title="账号信息填写有误"
        type="error"
        description="请检查"
        show-icon
    />
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'


import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import axios from "axios";

const isLoading = ref(false)
const dialogFormVisible = ref(false)
const alerflag1 = ref(false)
const alerflag2 = ref(false)
const User = reactive({
  username:'',
  password:'',
  nickname:'',
})


function register(){
  if(isNull()){
    alerflag1.value = false;
    console.log(isNull())
    dialogFormVisible.value = true;
  }else {
    alerflag1.value = true;
  }


}
function onSubmit() {
  if(User.nickname == null){
    alerflag2.value = true
  }else{
    alerflag2.value = false
    console.log(User)
    axios.post('http://localhost:8080/users/reg', User)
        .then(response => {
          alert('注册成功');
          dialogFormVisible.value = false;
        })
        .catch(error => {
          dialogFormVisible.value = false;
          alert('该账户已被注册');
        });
    User.nickname = '';
    User.username = '';
    User.password = '';
  }
}
function isNull(){
  if(User.username == '' || User.password == ''){
    return false
  }else {
    return true
  }
}
</script>